<template>
<view class="page">
	<view class="dzmp" v-if="form.nickname">
		<image class="bg" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/0b9e2fc306f38e94bac48ea38dbfb93.jpg" mode=""></image>
		<view class="tx">
			<image v-if="!form.avatar" class="shangchuan" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/shangchuan.png" mode=""></image>
			<image v-else class="image" :src="form.avatar" mode=""></image>
		</view>
		<view class="info_1">
			<view class="info_flex">
				<view class="info_name">{{form.nickname||'姓名'}}</view>
				<view class="info_zw">{{form.career||'职位'}}</view>
			</view>
			<view class="info_company">{{form.company_name||'所在单位'}}</view>
		</view>
		<view class="wxcode">
			<view class="img" @click="open">
				<image v-if="!form.qrcode" class="shangchuan" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/shangchuan.png" mode=""></image>
				<image v-else class="image" :src="form.qrcode" mode=""></image>
			</view>
			<view class="wx_text">微信二维码</view>
		</view>
		<view class="dh" @click="phone">
			<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/dzmp_dh.png" mode=""></image>
			<view class="">{{form.mobile||'联系电话'}}</view>
		</view>
		<view class="dh dz" @click="toMap">
			<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/dzmp_add.png" mode=""></image>
			<view class="t_o">{{form.address||'所在地址'}}</view>
		</view>
	</view>
	<view class="mp_felx" v-if="!user_id">
		<view class="view" @click="toPage('dzmpEdit')"><image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/xg.png" mode="" ></image>完善/修改</view>
		<button class="view" :plain="true" open-type="share">
			<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/pyq.png" mode=""></image>分享
		</button>
	</view>
	<view class="title_flex" v-if="!user_id">
		<view class="">访问量：{{sj.totalVisite}}</view>
		<view class="">今日访问：{{sj.todayVisite}}</view>
		<view class="">发名片（次)：{{sj.totalShare}}</view>
	</view>
	<view class="" style="width: 100%;height: 10px;"></view>
	<view class="zs_type">
		<view class="ymt_type_i" :class="zs_active==1?'active':''" @click="changeA(1)">我的园区</view>
		<view class="ymt_type_i" :class="zs_active==2?'active':''" @click="changeA(2)">我的项目</view>
	</view>
	
	
	<listPage v-if="(parkList.length>0&&zs_active==1)||(proList.length>0&&zs_active!=1)" :type_name="zs_active==1?'park':'project'" height='calc(100% - 300px)' :list='zs_active==1?parkList:proList' :total='0' @getMore='()=>{}'>
		<!-- <endlist :isLoad='isLoad' :isfinsh='isfinsh' :length='zs_active==1?parkList.length:proList.length'></endlist> -->
	</listPage>
	<view class="none_img"  v-if="(parkList.length==0&&zs_active==1) || (proList.length==0&&zs_active==2)">
		<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/zwsj.png" mode="widthFix"></image>
		<view class="">暂无</view>
	</view>
	<view class="" style="width: 100%;height: 80px;"></view>
</view>
</template>

<script>
	import {GetUserInfoByUserId,parklist,localprojects,shareCard,
					visiteCard,
					getCardSt,} from '../../utils/api.js'
	import listPage from '../../components/listPage.vue'
	import endlist from '../../components/endlist.vue'
	// import proList from '../../components/proList/proList.vue'
	export default {
		data() {
			return {
				zs_active:1,
				form:{
					nickname:'',
					mobile:'',
					company_name:'',
					com_type:'',
					career:'',
					avatar:'',
					qrcode:'',
					address:''
				},
				sj:{
					totalVisite:0,
					todayVisite:0,
					totalShare:0,
				},
				user_id:'',
				user_idd:'',
				parkList:[],
				proList:[],
				isLoad:false,
				isfinsh:false,
				isOne:true
			}
		},
		components:{
			listPage,
			endlist,
			// proList
		},
		onLoad(option){
			setTimeout(()=>{
				this.isOne = false
			},500)
			getCardSt().then(res=>{
				this.sj = res.data
			})
			if(option.scene){
				this.user_id= option.scene||''
			}else{
				this.user_id= option.user_id||''
			}
			if(this.user_id){
				visiteCard({user_id:this.user_id})
				let data = {
					isSign:1,
					user_id:this.user_id
				}
				GetUserInfoByUserId({user_id:this.user_id}).then(res=>{
					this.form.nickname= res.data.nickname
					this.form.avatar= res.data.avatar
					this.form.mobile= res.data.mobile
					this.form.career= res.data.career
					this.form.com_type= res.data.com_type
					this.form.company_name= res.data.company_name
					this.form.address= res.data.address 
					this.form.qrcode= res.data.qrcode 
				})
				localprojects.getList({user_id:this.user_id}).then(res=>{
					this.proList= res.data.data
				})
				parklist({user_id:this.user_id||this.user_idd}).then(res=>{
					this.parkList = res.data.data
				})
			}
			else{
				GetUserInfoByUserId().then(res=>{
					if(res.status==1&&res.data.id ){
						this.form.nickname= res.data.nickname
						this.form.avatar= res.data.avatar
						this.form.mobile= res.data.mobile
						this.form.career= res.data.career
						this.form.com_type= res.data.com_type
						this.form.company_name= res.data.company_name
						this.form.address= res.data.address 
						this.form.qrcode= res.data.qrcode 
						this.user_idd = res.data.id 
						parklist({user_id:this.user_idd}).then(res=>{
							this.parkList = res.data.data
						})
						localprojects.getList({user_id:this.user_idd}).then(res=>{
							this.proList= res.data.data
						})
					}
				})
			}
		}, 
		onShow() {
			if(!this.user_id&&!this.isOne){
				GetUserInfoByUserId().then(res=>{
					if(res.status==1&&res.data.id ){
						this.form.nickname= res.data.nickname
						this.form.avatar= res.data.avatar
						this.form.mobile= res.data.mobile
						this.form.career= res.data.career
						this.form.com_type= res.data.com_type
						this.form.company_name= res.data.company_name
						this.form.address= res.data.address 
						this.form.qrcode= res.data.qrcode 
						this.user_idd = res.data.id 
						parklist({user_id:this.user_idd}).then(res=>{
							this.parkList = res.data.data
						})
						localprojects.getList({user_id:this.user_idd}).then(res=>{
							this.proList= res.data.data
						})
					}
				})
			}
		},
		onShareTimeline() {
			shareCard({user_id:this.user_id||this.user_idd})
			return {
				path:`/pages/dzmp/dzmp?user_id=${this.user_id||this.user_idd}`,
				title: '我的名片 | 投资钟祥',
			}
		},
		onShareAppMessage() {
			shareCard({user_id:this.user_id||this.user_idd})
			return {
				path:`/pages/dzmp/dzmp?user_id=${this.user_id||this.user_idd}`,
				title: '我的名片 | 投资钟祥',
			}
		},
		methods: {
			phone(){
				uni.makePhoneCall({
						phoneNumber: this.form.mobile //仅为示例
				});
			},
			changeA(type){
				this.zs_active=type
			},
			open(item){
				if(this.form.qrcode){
					let img = this.form.qrcode 
					uni.previewImage({
						urls:[img]
					})
				}
			},
			toMap(){
				uni.openLocation({
					latitude : parseFloat(this.form.lat),
					longitude: parseFloat(this.form.lng),
					success: function () {
							console.log('success');
					},
					fail : function (err) {
							console.log(err);
					},
				})
			},
			toPage(type){
				uni.navigateTo({
					url:`/pages/${type}/${type}`
				})
			},
			toDetail(item){
				uni.navigateTo({
					url:`../huiyiDetail/huiyiDetail?id=${item.id}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page,page{
		width: 100%;
		height: 100%;
	}
	.page{
		overflow: auto;
	}
	.t_o{
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.title_flex{
		padding: 10px 12px;
		display: flex;
		color: #666;
		justify-content: space-around;
		font-size: 14px;
 		border-bottom: 1px solid #dfdfdf;
	}
	.item_l{
			width: calc(100% - 20px);
			display: flex;
			padding: 15px 10px;
			border-bottom: 1px solid #C0C0C0;
			.img{
				width: 40%;
				height: 90px;
				margin-right: 10px;
				border-radius: 4px;
				overflow: hidden;
				position: relative;
			}
			.type_t1{
				position: absolute;
				top: 0;
				left: 0;
				background: rgba($color: #000000, $alpha: .5);
				color: #fff;
				padding: 2px 4px;
				font-size: 14px;
			}
			.type_t{
				height: 22px;
				width: 70px;
				text-align: center;
				line-height: 22px;
				background-color: #ff9933;
				color: #fff;
				right: -18px;
				top: 6px;
				font-size: 12px;
				transform: rotate(45deg);
				position: absolute;
			}
			image{
				width: 100%;
				height: 100%;
			}
			.right_l{
				width: calc(60% - 10px);
				font-size: 14px;
				color: #000;
				position: relative;
			}
			.bottom{
				position: absolute;
				bottom: 2px;
				.flex_l{
					display: flex;
					align-items: center;
					font-size: 12px;
					color: #888;
					margin-top: 2px;
					image{
						width: 12px;
						height: 12px;
						min-width: 12px;
						margin-right: 4px;
					}
				}
			}
		}
	
	.dh{
		position: absolute;
		left: 18px;
		bottom: 48px;
		color: rgba($color: #fff, $alpha: .9);
		font-size: 14px;
		display: flex;
		align-items: center;
		image{
			width: 16px;
			height: 16px;
			margin-right: 6px;
		}
	}
	.dz{
		bottom: 22px;
	}
	.dzmp{
		width: 90%;
		position: relative;
		left: 5%;
		.info_1{
			position: absolute;
			left: 76px;
			top: 16px;
			color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 48px;
			.info_flex{
				display: flex;
				align-items: center;
				.info_name{
					font-size: 18px;
					margin-right: 10px;
					font-weight: 800;
				}
				.info_zw{
					height: 18px;
					padding: 0 6px;
					line-height: 18px;
					font-size: 12px;
					background-color: #FC5517;
					border-radius: 3px;
				}
			}
			.info_company{
				width: 160px;
				font-size:14px;
				color: rgba($color: #fff, $alpha: .9);
			}
		}
		.tx{
			position: absolute;
			width: 48px;
			height: 48px;
			border-radius: 24px;
			overflow: hidden;
			background-color: rgba($color: #fff, $alpha: .3);
			border: 1px solid rgba($color: #fff, $alpha: .5);
			left: 16px;
			top: 16px;
			color: #fff;
			.image{
				width: 100%;
				height: 100%;
			}
			.shangchuan{
				width: 24px;
				height: 24px;
				padding: 12px;
			}
		}
		.wxcode{
			position: absolute;
			right: 16px;
			top: 16px;
			.img{
				overflow: hidden;
				background-color: rgba($color: #fff, $alpha: .3);
				width: 66px;
				height: 66px;
				border-radius: 4px;
				border: 1px dashed rgba($color: #fff, $alpha: .5);
			}
			.image{
				width: 66px;
				height: 66px;
			}
			.shangchuan{
				width: 24px;
				height: 24px;
				padding: 21px;
			}
			.wx_text{
				width: 100%;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
				color: rgba($color: #fff, $alpha: .9);
			}
		}
		.bg{
			width: 100%;
			height: 180px;
		}
	}
	
.mp_felx{
	display: flex;
	justify-content: space-between;
	width: calc(100% - 30px);
	background-color: #fff;
	position: fixed;
	bottom: 0px;
	padding: 5px 15px;
	z-index: 100;
	.view{
		width: 48%;
		border-radius: 4px;
		box-shadow: 2px 2px 8px 2px rgba($color: #000, $alpha: 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		border:none;
		margin: 0;
		image{
			width: 28px;
			height: 28px;
			margin-right: 10px;
		}
	}
}
.zs_type{
	// font-family: '楷体';
	font-size: 17px;
	font-weight: 800;
	padding: 20px 40px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: calc(100% - 100px);
	.ymt_type_i{
		color:#333;
		position: relative;
		width: 80px;
		text-align: center;
	}
	.active{
		color: #0091FF;
		font-size: 18px;
		&::after{
			content: ' ';
			position: absolute;
			width: 50px;
			height: 3px;
			border-radius: 1.5px;
			bottom:-8px;
			background-color: #0091FF;
			left: 15px;
		}
	}
}
.none_img{
	width: 60%;
	left: 20%;
	position: relative;
	font-size: 22px;
	text-align: center;
	image{
		width: 100%;
	}
}
</style>
